<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../css/indexCss.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!--导入jquery-->
    <script src="../js/jquery-3.3.1.js" type="text/javascript"></script>
    <!--导入官网的axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../js/bootstrap.js"></script>

    <title>购物系统</title>
    <script>
        window.onload=function (){
            axios.get("../goods/getAll").then((res)=>{
                //获得所有商品
                var goods = res.data;
                var goodTable = "";
                for(var i=0;i<goods.length;i++){
                    if(i%5==0) goodTable+="<tr>";
                    //单个商品
                    var good = goods[i];
                    var aGood="<td>" +
                        "<div class=\"itemsFrame\" onclick=\"getBuy(this)\">" +
                        "<img src=\"../imag/"+good.img+"\" alt=\"itemImg\" class=\"itemImg\">" +
                        "<label class=\"priceTag\"><h2>$"+good.price+"</h2></label>" +
                        "<label class=\"goodsName\"><h4>"+good.name+"</h4></label>" +
                        "<label id=\"goodsIntroduce\" hidden>"+good.introduce+"</label>" +
                        "<label id=\"goodsName\" hidden>"+good.name+"</label>" +
                        "<label id=\"goodsXl\" hidden>"+good.xl+"</label>" +
                        "</div>" +
                        "</td>";
                    goodTable+=aGood;
                    if(i%5==4) goodTable+="</tr>";
                }
                document.getElementById("main").innerHTML = goodTable;
            })

            /* 搜索查询 */
            jQuery("#searchSubmit").click(function (){
                var searchText = jQuery("#searchText").val();

                //修改获得的商品
                jQuery.ajax({
                    url: 'http://localhost:8081/goods/search',
                    type: 'get',
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    data: {
                        "name":searchText
                    },
                    success: function (res) {
                        //获得所有商品
                        var goods = res;
                        var goodTable = "";
                        for(var i=0;i<goods.length;i++){
                            if(i%5==0) goodTable+="<tr>";
                            //单个商品
                            var good = goods[i];
                            var aGood="<td>" +
                                "<div class=\"itemsFrame\" onclick=\"getBuy(this)\">" +
                                "<img src=\"../imag/"+good.img+"\" alt=\"itemImg\" class=\"itemImg\">" +
                                "<label class=\"priceTag\"><h2>$"+good.price+"</h2></label>" +
                                "<label class=\"goodsName\"><h4>"+good.name+"</h4></label>" +
                                "<label id=\"goodsIntroduce\" hidden>"+good.introduce+"</label>" +
                                "<label id=\"goodsName\" hidden>"+good.name+"</label>" +
                                "<label id=\"goodsXl\" hidden>"+good.xl+"</label>" +
                                "</div>" +
                                "</td>";
                            goodTable+=aGood;
                            if(i%5==4) goodTable+="</tr>";
                        }
                        document.getElementById("main").innerHTML = goodTable;
                    }
                })
            })

            //按销量排序
            jQuery("#xlSubmit").click(function (){
                jQuery.ajax({
                    url: 'http://localhost:8081/goods/sortSearch',
                    type: 'get',
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    data: {
                        "sort":jQuery("#xlSubmit").val()
                    },
                    success: function (res) {
                        //修改标签
                        if(jQuery("#xlSubmit").val()=="热门↑"){
                            document.getElementById("xlSubmit").setAttribute("value","热门↓")
                        }else{
                            document.getElementById("xlSubmit").setAttribute("value","热门↑")
                        }

                        //获得所有商品
                        var goods = res;
                        var goodTable = "";
                        for(var i=0;i<goods.length;i++){
                            if(i%5==0) goodTable+="<tr>";
                            //单个商品
                            var good = goods[i];
                            var aGood="<td>" +
                                "<div class=\"itemsFrame\" onclick=\"getBuy(this)\">" +
                                "<img src=\"../imag/"+good.img+"\" alt=\"itemImg\" class=\"itemImg\">" +
                                "<label class=\"priceTag\"><h2>$"+good.price+"</h2></label>" +
                                "<label class=\"goodsName\"><h4>"+good.name+"</h4></label>" +
                                "<label id=\"goodsIntroduce\" hidden>"+good.introduce+"</label>" +
                                "<label id=\"goodsName\" hidden>"+good.name+"</label>" +
                                "<label id=\"goodsXl\" hidden>"+good.xl+"</label>" +
                                "</div>" +
                                "</td>";
                            goodTable+=aGood;
                            if(i%5==4) goodTable+="</tr>";
                        }
                        document.getElementById("main").innerHTML = goodTable;
                    }
                })
            });

            //按价格排序
            jQuery("#priceSubmit").click(function (){
                jQuery.ajax({
                    url: 'http://localhost:8081/goods/sortSearch',
                    type: 'get',
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    data: {
                        "sort":jQuery("#priceSubmit").val()
                    },
                    success: function (res) {
                        //修改标签
                        if(jQuery("#priceSubmit").val()=="价格↑"){
                            document.getElementById("priceSubmit").setAttribute("value","价格↓")
                        }else{
                            document.getElementById("priceSubmit").setAttribute("value","价格↑")
                        }

                        //获得所有商品
                        var goods = res;
                        var goodTable = "";
                        for(var i=0;i<goods.length;i++){
                            if(i%5==0) goodTable+="<tr>";
                            //单个商品
                            var good = goods[i];
                            var aGood="<td>" +
                                "<div class=\"itemsFrame\" onclick=\"getBuy(this)\">" +
                                "<img src=\"../imag/"+good.img+"\" alt=\"itemImg\" class=\"itemImg\">" +
                                "<label class=\"priceTag\"><h2>$"+good.price+"</h2></label>" +
                                "<label class=\"goodsName\"><h4>"+good.name+"</h4></label>" +
                                "<label id=\"goodsIntroduce\" hidden>"+good.introduce+"</label>" +
                                "<label id=\"goodsName\" hidden>"+good.name+"</label>" +
                                "<label id=\"goodsXl\" hidden>"+good.xl+"</label>" +
                                "</div>" +
                                "</td>";
                            goodTable+=aGood;
                            if(i%5==4) goodTable+="</tr>";
                        }
                        document.getElementById("main").innerHTML = goodTable;
                    }
                })
            });
        };
    </script>

    <script type="text/javascript">
        function $(i) {
            return document.getElementById(i);
        }
        var node;
        var allData="";
        var count=1;

        /* 添加购物车功能 */
        function addCart(){
            allData=allData+"data"+count+"="+node.childNodes.item(0).src+";";count++;
            allData=allData+"data"+count+"="+node.childNodes.item(1).innerHTML+";";count++;
            allData=allData+"data"+count+"="+node.childNodes.item(2).innerHTML+";";count++;
            window.alert("已加入购物车"+(count-1)/3+"件")
            cancelBuy();
        }

        function SetCookie() {
            document.cookie=escape("count="+count+";"+allData);
        }

        /* 购物车功能 */
        function goToShoppingList() {
            SetCookie();
            window.open("shoppingList.html","_self");
        }

        /* 购买商品功能 */
        function getBuy(node) {

            const buy = document.getElementById("buy");
            buy.style.display="block";
            const img = node.childNodes.item(0);
            const price = node.childNodes.item(1);
            const information = node.childNodes.item(3);
            const name = node.childNodes.item(4);
            const xl = node.childNodes.item(5);
            const buyImg = document.getElementById("buyImg");
            const buyPrice = document.getElementById("buyPriceTag");
            const buyInformation = document.getElementById("buyInformation");
            const buyXl = document.getElementById("buyXl");
            const buyName = document.getElementById("buyName");
            buyImg.src=img.src;
            buyPrice.innerHTML=price.innerHTML;
            buyInformation.innerHTML=information.innerHTML;
            buyName.innerHTML=name.innerHTML;
            buyXl.innerHTML="销量为："+xl.innerHTML;
            this.node=node;
        }

        /* 取消购买功能 */
        function cancelBuy(){
            const buy = document.getElementById("buy");
            buy.style.display="none";
        }

        /* 退出 */
        function exit(){
            jQuery.post("../users/exitUser",{},function (data){
                location.href = "login.html";
            })
        }
    </script>
</head>

<body>
<div>
    <!-- 顶部图片 -->
    <img id="top" alt="picture" src="../imag/shopping.jpg" style="top: 0; left: 0;right: 0;width:1518px;height: 250px;">
    <!-- 退出 -->
    <img alt="" src="../imag/exitShopping.png" style="position: absolute;height: 60px;width: 100px;left: 100px;" onclick="exit()">
    <label style="position: absolute;height: 60px;width: 150px;left: 220px;text-decoration: none;color: black" onclick="exit()"><h2>退出</h2></label>

</div>
<div id="shoppingCart">
    <!-- 购物车 -->
    <img alt="shoppingpic" src="../imag/shoppingCart.png" style="position: absolute;height: 60px;width: 100px;left: 0;" onclick="goToShoppingList()" >
    <label style="position: absolute;height: 60px;width: 180px;left: 100px;text-decoration: none;color: black" onclick="goToShoppingList()">
        <h2>购物车与订单</h2></label>
</div>
<div id="search">
    <input type="text" name="search" id="searchText" placeholder="">
    <label>
        <input type="button" value="搜索" id="searchSubmit">
        <input type="button" value="热门↑" id="xlSubmit">
        <input type="button" value="价格↑" id="priceSubmit">
    </label>
</div>

<div id="buy">
<!--<div style="background: red;width: 100px;height: 100px;"></div>-->
    <img src="" id="buyImg"/>
    <label id="buyXl"></label>                  <!-- 销量 -->
    <label id="buyName"></label>                <!-- 名称 -->
    <label id="buyPriceTag"></label>            <!-- 价格 -->
    <label id="buyInformation"></label>         <!-- 购买信息 -->
    <img src="../imag/cancel.jpg" class="cancelImg" onclick="cancelBuy()">
    <div style="text-align:center;position:absolute;bottom: 0;left: 0;right: 0;height: 50px;">
    <input type="button" value="加入购物车" onclick="addCart()">
    </div>
</div>
<table id="main">
   <!-- <script>
        var str1="<td>" +
            "<div class=\"itemsFrame\" onclick=\"getBuy(this)\">" +
            "<img src=\"../imag/2d56ec52f82fc65a.jpg\" alt=\"itemImg\" class=\"itemImg\">" +
            "<label class=\"priceTag\"><h2>$800</h2></label>" +
            "<label class=\"information\"><h4>超轻羽绒服2022年冬季爆款</h4></label>" +
            "</div>" +
            "</td>";
        var str2="<td>" +
            "<div class=\"itemsFrame\" onclick=\"getBuy(this)\">" +
            "<img src=\"../imag/5b53bea8a4440a0e.jpg\" alt=\"itemImg\" class=\"itemImg\">" +
            "<label class=\"priceTag\"><h2>$500</h2></label>" +
            "<label class=\"information\"><h5>波司登羽绒服男中长款2018新款极寒系列大毛领时尚外套</h5></label>" +
            "</div>" +
            "</td>";
        var str3="<td>" +
            "<div class=\"itemsFrame\" onclick=\"getBuy(this)\">" +
            "<img src=\"../imag/9e903d5799fed73a.jpg\" alt=\"itemImg\" class=\"itemImg\">" +
            "<label class=\"priceTag\"><h2>$1000</h2></label>" +
            "<label class=\"information\"><h5>波司登鹅绒羽绒服男2018新款GORE-TEX极寒短款加厚户外</h5></label>" +
            "</div>" +
            "</td>";
        for (var i=1; i<=2; i++){
                document.write("<tr>");
                for (var j=1;j<=5;j++){
                    if(j===1)
                        document.write(str1);
                    else if(j===2)
                        document.write(str2);
                    else document.write(str3);
                }
                document.write("</tr>");
        }
    </script>-->
</table>
</body>
</html>
